<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>Spring Boot Security示例</title>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{css/app.css}"/>
    <link rel="stylesheet" th:href="@{css/bootstrap-theme.min.css}"/>
    <link rel="stylesheet" type="text/css"
          href="//cdnjs.cloudflare.com/ajax/libs/span-awesome/4.2.0/css/span-awesome.css"/>
    <script type="text/javascript" th:src="@{js/jquery-1.11.0.min.js}"></script>
    <script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
    <script type="text/javascript">
        $(function () {
            $("#loginBtn").click(function () {
                var loginName = $("#loginName");
                var password = $("#password");
                var msg = "";
                if (loginName.val() == "") {
                    msg = "登录名称不能为空!";
                    loginName.focus();
                } else if (password.val() == "") {
                    msg = "密码不能为空!";
                    password.focus();
                }
                if (msg != "") {
                    alert(msg);
                    return false;
                }
                $("#loginForm").submit();
            });
        });
    </script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">简单Spring Boot Security示例</h3>
    </div>
</div>
<div id="mainWrapper">
    <div class="login-container">
        <div class="login-card">
            <div class="login-form">
                <!-- 表单提交到login -->
                <form id="loginForm" th:action="@{/auth}" method="post" class="form-horizontal">
                    <!-- 用户名或密码错误提示 -->
                    <div th:if="${param.error != null}">
                        <div class="alert alert-danger">
                            <p><span color="red" th:text="${param.error}">用户名或密码错误!</span></p>
                        </div>
                    </div>
                    <!-- 注销提示 -->
                    <div th:if="${param.logout != null}">
                        <div class="alert alert-success">
                            <p><span color="red">用户已注销成功!</span></p>
                        </div>
                    </div>
                    <div class="input-group input-sm">
                        <label class="input-group-addon"><i class="fa fa-user"></i></label>
                        <input type="text" class="form-control" id="loginName" name="loginName" placeholder="请输入用户名"/>
                    </div>
                    <div class="input-group input-sm">
                        <label class="input-group-addon"><i class="fa fa-lock"></i></label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
                    </div>
                    <div class="form-actions">
                        <input id="loginBtn" type="button"
                               class="btn btn-block btn-primary btn-default" value="登录"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>